{extend name="public:base"}
{block name='css'}
<style>
    ::-webkit-scrollbar {display:none}
</style>
{/block}

{block name='body'}
<div class="view view-main white-navbar white-toolbar">
    <div data-name="home" class="page">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left"><a href="/user" class="external"><i class="iconfont icon-fanhui"></i></a></div>
                <div class="center"><span>我的订单</span></div>
                <div class="right"></div>
            </div>
        </div>

        <div class="page-content infinite-scroll-content">

            <div class="me-order" style="overflow-x: scroll;width: 100%;">
                <div class="m js-state-list" >
                    {volist name='state_list' id='vo'}
                    <a href="javascript:;" onclick="showThis(this);" data-status="{$key}" class="{if condition='$key eq input("state", 0, "intval")'}on{/if} external">{$vo}</a>
                    {/volist}
                </div>
            </div>

            {volist name='state_list' id='vo'}
            <div class="js-state-{$key}" style="display: {if condition='$key eq input("state", 0, "intval")'}block{else/}none{/if};">
                <div class="order-list">

                </div>
                {include file='public:loading' /}
            </div>
            {/volist}

        </div>


    </div>
</div>
{/block}

{block name="js"}
<script>
    function showThis(self) {
        var status = $(self).attr('data-status');
        $(self).addClass('on').siblings().removeClass('on');
        $('.order-list').parent().hide();
        $('.js-state-'+status).show();
        getList(status)
    }
    function getList(status) {
        var obj = $('.js-state-'+status);
        var total = obj.find('.li').length;
        if (total % 10 != 0) {
            return false;
        }

        if (obj.find('.loading').is(':visible') || obj.find('.no-more').is(':visible') || obj.find('.no-data').is(':visible')) {
            return false;
        }
        obj.find('.loading').show();

        var p = total / 10;
        $.post("{:url('getOrderList')}", {page:p+1,state:status}, function(data){
            obj.find('.loading').hide();
            if (data.data.num > 0) {
                if (data.data.num < 10) {
                    obj.find('.no-more').show();
                }
                $(data.data.html).appendTo(obj.find('.order-list'));
            } else {
                if (total > 0) {
                    obj.find('.no-more').show();
                } else {
                    obj.find('.no-data').show();
                }
            }
        }, 'json');
    }
    $(function(){
        /*{volist name='state_list' id='vo'}*/
        getList({$key});
        /*{/volist}*/
    });
    $$('.infinite-scroll-content').on('infinite', function () {
        getList($('.js-state-list .on').attr('data-status'));
    });
</script>
{/block}